<template>
  <div
    class="index-frame"
    v-if="!fullInfo"
    v-loading="!fullInfo"
    style="height: 100vh"
  ></div>
  <div class="main" v-else>
    <div>
      <PositionBar :crumbs="fullInfo.crumbs" :type="3" />
      <div class="left-info-content">
        <div class="title-info">
          <div class="title-one" :title="fullInfo.info.titleOne">
            {{ fullInfo.info.titleOne }}
          </div>
          <div class="time-author">
            <div style="margin-right: 24px">
              时间：{{ fullInfo.info.createTime }}
            </div>
            <div style="margin-right: 24px">
              来源：{{ fullInfo.info.origin }}
            </div>
            <div>作者：{{ fullInfo.info.author }}</div>
          </div>
        </div>
        <p v-html="fullInfo.info.content" class="html-style"></p>
      </div>
      <div class="tabs-box">
        <div class="tabs-bar">
          <div
            class="tab"
            :class="{ act: act.name == it.name }"
            v-for="it in tabs"
            :key="it.name"
            @mouseover="act = it"
          >
            <span>{{ it.name }}</span>
          </div>
        </div>
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="相关文章" name="first"> -->
        <div style="display: flex; flex-wrap: wrap">
          <div
            v-for="i in tabsValue"
            :key="i.id"
            style="width: 370px; display: flex"
          >
            <div class="point"></div>
            <div
              class="tabs-items-title"
              @click="getData(i.id)"
              :title="i.title"
            >
              {{ i.title }}
            </div>
          </div>
        </div>
        <!-- </el-tab-pane> -->
        <!-- <el-tab-pane label="猜你喜欢" name="second"> -->
        <!-- <div style="display: flex; flex-wrap: wrap">
          <div
            v-for="i in fullInfo.likeInfoVos"
            :key="i.id"
            style="width: 370px; display: flex"
          >
            <div class="point"></div>
            <div
              class="tabs-items-title"
              @click="getData(i.id)"
              :title="i.title"
            >
              {{ i.title }}
            </div>
          </div>
        </div> -->
        <!-- </el-tab-pane>
        </el-tabs> -->
      </div>
      <div class="web-words">
        <div class="title-box">
          <div class="title">网页评论</div>
        </div>
        <div class="web-words-content">
          <el-input
            type="textarea"
            disabled
            :autosize="{ minRows: 8 }"
            style="width: 755px; margin-top: 24px"
          ></el-input>
        </div>
        <div style="display: flex; justify-content: flex-end">
          <el-button
            type="success"
            style="margin-top: 20px; margin-right: 20px"
            @click="send"
            >发表</el-button
          >
        </div>
        <div class="comment-box">
          <div
            class="comment-item"
            v-for="(item, index) in fullInfo.comment"
            :key="index"
          >
            <div class="comment-user-info">
              <img v-if="item.icon" :src="item.icon" alt="" class="" />
              <div
                v-else
                style="
                  border-radius: 50%;
                  border: 2px solid #999;
                  width: 40px;
                  height: 40px;
                  margin-right: 10px;
                "
              ></div>
              <div>
                <div
                  style="
                    color: #1d2127;
                    line-height: 20px;
                    font-weight: 600;
                    font-size: 14px;
                  "
                >
                  {{ item.name || "用户名" }}
                </div>
                <div style="color: #93999e; line-height: 20px; font-size: 14px">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
            <div class="comment-content">
              {{ item.content }}
            </div>
            <div class="reply-box" v-if="item.comments.length && item.comments">
              <div v-for="(k, i) in item.comments" :key="i">
                <div class="comment-user-info">
                  <img v-if="k.icon" :src="k.icon" alt="" class="" />
                  <div
                    v-else
                    style="
                      border-radius: 50%;
                      border: 2px solid #999;
                      width: 40px;
                      height: 40px;
                      margin-right: 10px;
                    "
                  ></div>
                  <div>
                    <div
                      style="
                        color: #1d2127;
                        line-height: 20px;
                        font-weight: 600;
                        font-size: 14px;
                      "
                    >
                      {{ k.name || "用户名" }}
                    </div>
                    <div
                      style="color: #93999e; line-height: 20px; font-size: 14px"
                    >
                      {{ k.createTime }}
                    </div>
                  </div>
                </div>
                <div class="comment-content">
                  {{ k.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tuijia-p">
      <div class="title-box">
        <div class="title">推荐文章</div>
      </div>
      <div class="img-box">
        <div v-for="(i, index) in fullInfo.recommendInfoVos" :key="index">
          <div class="items" @click="getData(i.id)">
            <img :src="i.imgUrl" alt="" class="img-items" />
            <div class="img-title" :title="i.title">{{ i.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import PositionBar from "@/components/PositionBar.vue";
import { onBeforeMount, ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

const router = useRouter();
const route = ref(useRoute());
const fullInfo = ref(null);
const tabsValue = computed(() => fullInfo.value[act.value.key]);
const tabs = ref([
  {
    name: "相关文章",
    key: "aboutInfoVos",
  },
  {
    name: "猜你喜欢",
    key: "likeInfoVos",
  },
]);
const act = ref(tabs.value[0]);

// const activeName = ref("first");
const getData = (id) => {
  router.push({
    name: "information-detail",
    params: { id: id },
  });
  // axios.get(`/api/download/info/detail/${id}.html`).then((res) => {
  //   fullInfo.value = res.data.data;
  // });
};
const send = () => {
  ElMessageBox.alert("暂未开放", "提示", {
    type: "warning",
    "confirm-button-text": "确定",
  });
};
onMounted(() => {
  axios
    .get(`/api/download/info/detail/${route.value.params.id}.html`)
    .then((res) => {
      fullInfo.value = res.data.data;
    });
});
</script>
<style lang="less" scoped>
.main {
  display: flex;
  justify-content: center;
  .title-info {
    .time-author {
      display: flex;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #93999e;
      padding-bottom: 35px;
      border-bottom: 1px solid #eeeeee;
    }
    .title-one {
      width: 660px;
      height: 36px;
      font-size: 36px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1d2127;
      line-height: 36px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-bottom: 25px;
    }
  }
  .left-info-content {
    width: 793px;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 30px;
    margin: 20px 20px 20px 0px;
    .html-style {
      margin-top: 20px;
    }
  }
  .tabs-box {
    width: 793px;
    height: 232px;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 20px;
    .tabs-bar {
      display: flex;
      justify-content: flex-start;
      flex: 1;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 10px;
      .tab {
        display: flex;
        position: relative;
        justify-content: center;
        width: 100px;
        cursor: pointer;
        span {
          font-size: 16px;
          font-weight: 500;
          color: #93999e;
          line-height: 16px;
        }
      }

      .act {
        span {
          color: @theme-color;
        }
      }
      .act:after {
        position: absolute;
        content: " ";
        border-bottom: 2px solid @theme-color;
        width: 80px;
        bottom: -12px;
      }
    }
    .point {
      width: 4px;
      height: 4px;
      background: #f9b002;
      border-radius: 50%;
      margin-top: 9px;
    }
    .tabs-items-title {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d2127;
      margin-bottom: 10px;
      cursor: pointer;
      &:hover {
        color: #488af8;
      }
    }
  }
  .web-words {
    width: 793px;
    // min-height: 400px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    .title-box {
      height: 50px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      padding: 0px 20px;
      .title {
        font-size: 20px;
        line-height: 50px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1d2127;
      }
    }
    .web-words-content {
      display: flex;
      justify-content: center;
    }
  }
  .tuijia-p {
    width: 387px;
    max-height: 700px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 49px;
    margin-bottom: 20px;
    .title-box {
      height: 50px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      padding: 0px 20px;
      .title {
        font-size: 20px;
        line-height: 50px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1d2127;
      }
    }
    .img-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px;
      padding-top: 0;
      .items {
        width: 164px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #545759;
        margin-top: 20px;
        cursor: pointer;
        &:hover {
          background-color: #eee;
          color: @link-color;
        }
        .img-title {
          width: 160px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .img-items {
          height: 110px;
          border-radius: 4px;
        }
      }
    }
  }
  .comment-box {
    padding: 20px;
    .comment-item {
      border-bottom: 1px solid #eee;
      padding-top: 20px;
      .comment-user-info {
        display: flex;
      }
      .comment-content {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #545759;
        margin: 12px 0px;
      }
      .reply-box {
        background: #f5f7f8;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>